<template>
  <div>
    <header-top></header-top>

    <el-row type="flex" justify="center" style="margin-top: 30px">
      <el-col :span="11" style="border: 1px solid lightgray">
        <!--文章展示部分-->
        <div>
          <div class="article_title">{{article.title}}</div>
          <div class="article_infos">
            <span> <i class="iconfont icon-yanjing" style="color: red"></i>浏览量：{{article.viewCount}}</span>
            <span style="margin-left: 50px"> <i class="iconfont icon-good" style="color: red"></i>点赞数：{{article.likeCount}}</span>
            <span style="margin-left: 50px"> <i class="iconfont icon-shoucang" style="color: red"></i>收藏数：{{article.collectionCount}}</span>
            <span style="margin-left: 50px"> <i class="iconfont icon-zuozhe" style="color: red"></i>作者：<span class="to_author" @click="showOtherInfo(article.user.id)">{{article.user.nickname}}</span></span>
          </div>

          <div class="article_body" v-html="article.body.contenthtml">
          </div>
          <div class="article_tags">标签：
            <el-tag type="success" style="margin-right: 30px" v-for="t in tags">{{t.name}}</el-tag>
          </div>
          <div class="article_tags">分区：
            <el-tag type="primary">{{boardName}}</el-tag>
          </div>
          <div class="article_tags">分类：
            <el-tag type="primary">{{article.category.name}}</el-tag>
          </div>
        </div>
        <div style="border-top: 1px solid lightgray;border-bottom: 1px solid lightgray;height: 60px;line-height: 60px;margin-top: 60px">
          <div class="article_options">
            <i class="iconfont icon-shoucang article_option1" v-if="ifCollect == 1" @click="cancelCollect">已收藏</i>
            <i class="iconfont icon-shoucang article_option" v-if="ifCollect == 0" @click="addToCollect">收藏</i>
            <i class="iconfont icon-good article_option1"  v-if="ifLike == 1" @click="cancelLike">已点赞</i>
            <i class="iconfont icon-good article_option" v-if="ifLike == 0" @click="addToLike">点赞</i>
          </div>
        </div>


        <!--评论区部分-->
        <el-container class="me-view-container" style="margin-left: 50px">
          <el-main>
            <div class="me-view-comment">
              <div class="me-view-comment-title">
                <span>{{comments.length}}条评论</span>
              </div>
              <p v-if="comments.length==0">当前还没有评论哦~快来发表第一条评论吧</p>
              <commentItem
                  v-for="(c,index) in comments"
                  :comment="c"
                  :userId="userId"
                  :index="index"
                  :rootCommentCounts="comments.length"
                  @commentCountsIncrement="commentCountsIncrement"
                  :key="c.id"
                  :articleId="articleId"
                  :getComments="getComments">
              </commentItem>
              <div class="me-view-comment-write">
                <el-row :gutter="20">
                  <el-col :span="2">
<!--                    <a class="">-->
<!--                      <img class="me-view-picture" src="../assets/images/login_bgimg.jpg"></img>-->
<!--                    </a>-->
                  </el-col>
                  <el-col :span="22">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 2}"
                        placeholder="你的评论..."
                        class="me-view-comment-text"
                        v-model="comment.content"
                        resize="none">
                    </el-input>
                  </el-col>
                </el-row>

                <el-row :gutter="20" style="margin-top: 20px">
                  <el-col :span="2" :offset="19">
                    <el-button type="primary" @click="publishComment()">评论</el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-col>
      <el-col :span="4" style="margin-left: 30px">
        <el-row class="author_box">
          <el-col class="author_avatar" style="border: 1px solid lightgray">
            <div class="avatar_nickname">
              <img :src="imgUrl+author.avatar" alt="" style="">
              <span>{{author.nickname}}</span>
            </div>
            <div class="author_static_item">
                <p>TA的粉丝</p>
                <span>{{author.fanCount}}</span>
            </div>
            <div class="author_static_item">
              <p>TA的文章</p>
              <span>{{articleCount}}</span>
            </div>
            <div style="text-align: center">
              <el-button type="success" v-if="status==0" style="margin-top: 15px" round @click="addFollowThisAuthor(userId,author.id)">关注TA</el-button>
              <el-button type="danger" v-if="status==1" style="margin-top: 15px" round @click="cancelFollowThisAuthor(userId,author.id)">取消关注</el-button>
              <el-button type="primary" style="margin-top: 15px" round @click="showOtherInfo(author.id)">TA的主页</el-button>
            </div>

          </el-col>
        </el-row>
        <div class="right_bar_item">
          <div class="right_bar_item_title">
            <h3>TA的热门文章</h3>
          </div>
          <p v-for="a in authorHotArticles"><el-link type="success" class="right_links" @click="showArticleDetail(a.id,a.user.id)">{{a.title}}</el-link></p>
        </div>
      </el-col>
    </el-row>

  </div>


</template>

<script>
import headerTop from "@/components/HeaderTop";
import commentItem from "@/components/CommentItem";
export default {
  name: "ArticleDetail",
  components:{headerTop,commentItem},
  data() {
    return {
      tags:'',
      articleId:'',
      boardName:'',
      categroyName:'',
      imgUrl:this.$Myurl.userImageUrl,
      //文章列表
      article: {},
      authorId:'',
      author: {},
      //当前登录用户的id,可以从sessionStrage中获取
      userId:-1,
      now:'1',
      size:'5',
      //所有的评论
      comments: [],
      //新的评论
      comment: {
        articleId:'',
        userId:'',
        toUserId:'',
        content:'',
        level:'',
        parentId:'',
      },
      //是否点赞的标志
      ifLike:'',
      ifCollect:'',
      status:'',
      authorHotArticles:[],
      articleCount:0,
    }
  },
  methods:{
    addViewCountAndViewHistory(){
      let url = 'article/addViewCountAndViewHistory'
      this.$axios.post(url,null,{
        params:{
          userId:this.userId,
          articleId:this.articleId
        }
      }).then(res=>{
          if(res.data.code == 200){
            this.getArticle();
          }
      })
    },
    getAuthorArticleCount(){
      let url = 'article/getCountByAuthorId'
      this.$axios.get(url,{
        params:{
          authorId:this.authorId,
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              this.articleCount = res.data.data;
            }
          })
    },
    queryFollowStatus(){
      let url = 'user/findFollowStatus';
      this.$axios.get(url,{
        params:{
          authorId:this.authorId,
          userId:this.userId
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              this.status = res.data.data;
            }
          })
    },
    addFollowThisAuthor(userId,authorId){
      console.log(userId+authorId)
      if(this.userId == -1){
        this.$message.warning('当前还未登录，不能关注~')
        return;
      }
      if(userId == authorId){
        this.$message.warning('您不能关注你自己~')
        return;
      }
      let url = 'user/addFollow';
      this.$axios.get(url,{
        params:{
          authorId:authorId,
          userId:userId
        }
      })
          .then(res=>{
            if (res.data.code == 200){
              this.$message({
                type:'success',
                message:res.data.msg,
                duration:1000
              });
              this.getAuthor();
              this.queryFollowStatus();

            }else {
              this.$message({
                message:res.data.msg,
                type:"error",
                duration:1000
              })
            }
          });
    },
    cancelFollowThisAuthor(userId,authorId){
      let url = 'user/cancelFollowUser';
      this.$axios.get(url,{
        params:{
          authorId:authorId,
          userId:userId
        }
      })
          .then(res=>{
            if (res.data.code == 200){
              this.$message({
                type:'warning',
                message:res.data.msg,
                duration:1000
              });
              this.getAuthor();
              this.queryFollowStatus();

            }else {
              this.$message({
                message:res.data.msg,
                type:"error",
                duration:1000
              })
            }
          });
    },
    showOtherInfo(uid){
      console.log(uid)
      console.log(this.userId)
      if(uid == this.userId){
        this.$router.push({
          path:'/personalCenter',
        })
        return;
      }
      this.$router.push({
        path:'/otherInfo',
        query:{
          authorId:uid,
        }
      })
    },
    showArticleDetail(articleId,authorId){
      this.$router.push({
        path:'/articleDetail',
        query: {
          articleId: articleId,
          authorId: authorId
        }
      });
    },
    getAuthorHotArticles(){
      let url = 'article/getHotArticleListByAuthorId'
      this.$axios.get(url,{
        params:{
          authorId:this.authorId
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              this.authorHotArticles = res.data.data;
            }
          })
    },
    commentCountsIncrement() {
      this.article.commentCounts += 1
    },
    getComments(){
      let url = 'comment/getCommentsByAid'
      this.$axios.get(url,{
        params:{
          now:this.now,
          size:this.size,
          aid:this.articleId
        }
      }).then(res=>{
        if(res.data.code == 200){
            this.comments = res.data.data.list;
            console.log(this.comments)
        }else{
          this.$message({
            type:'danger',
            msg:res.data.msg,
            duration:1000
          })
        }
      })
    },
    getAuthor(){
      let url = 'user/findUserByKey/'+this.authorId;
      this.$axios.get(url)
      .then(res=>{
        if(res.data.code == 200){
          this.author = res.data.data;
        }
      })
    },
    getArticle() {
      console.log(this.articleId)
      //这里发送axios的请求，获得文章的信息
      let url = "article/getArticleById";
      this.$axios.get(url,{
          params:{
            id:this.articleId
          }
        })
          .then(res=>{
            if(res.data.code == 200){
              this.article = res.data.data;
              this.getArticleBoardName(this.article.category.id);
              console.log(this.article)
            }
          })

    },
    getArticleBoardName(categoryId){
      let url = 'board/getBoardNameByCateId';
      this.$axios.get(url,{
        params:{
          categoryId:categoryId
        }
      }).then(res=>{
         this.boardName = res.data.data;
      })

    },
    //发布评论的方法
    publishComment() {
      if(this.userId == -1){
        this.$message.warning('当前还未登录，不能评论~')
        return;
      }
      if (!this.comment.content) {
        return;
      }
      this.comment.articleId = this.articleId;
      this.comment.userId = this.userId;
      this.comment.toUserId = -1;
      this.comment.level = 1;
      this.comment.parentId = -1;
      console.log('文章id'+this.comment.articleId)
      console.log(this.comment)
      //发送axios请求插入一条评论信息，刷新评论列表
      let url = 'comment/addComment'
      this.$axios.post(url,this.comment)
        .then(res=>{
          if(res.data.code == 200){
            this.$message.success(res.data.msg);
            this.getComments();
            this.comment.content="你的评论..."
          }
        })
    },
    checkIfLike(){
      let url = 'article/checkIfLike';
      this.$axios.get(url,{
        params:{
          userId:this.userId,
          articleId:this.articleId
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              this.ifLike = res.data.data;
              console.log('ifLike'+this.ifLike)
            }
          })
    },
    checkIfCollect(){
      let url = 'article/checkIfCollect';
      this.$axios.get(url,{
        params:{
          userId:this.userId,
          articleId:this.articleId
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              this.ifCollect = res.data.data;
              console.log('ifCollect'+this.ifCollect)
            }
          })
    },
    addToLike(){
      let url = 'article/addToLike';
      this.$axios.post(url,null,{
        params:{
          userId:this.userId,
          articleId:this.articleId
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              this.$message.success('点赞成功~')
              this.initStatus();
            }
          })
    },
    addToCollect(){
      if(this.userId == -1){
        this.$message.warning('当前还未登录，不能收藏~')
        return;
      }
      let url = 'article/addToCollection';
      this.$axios.post(url,null,{
        params:{
          userId:this.userId,
          articleId:this.articleId
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              this.$message.success('收藏成功~');
              this.initStatus();
            }
          })
    },
    cancelCollect(){
      let url = 'article/cancelCollect';
      this.$axios.post(url,null,{
        params:{
          userId:this.userId,
          articleId:this.articleId
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              this.$message.warning('已取消收藏~');
              this.initStatus();
            }
          })
    },
    cancelLike(){
      let url = 'article/cancelLike';
      this.$axios.post(url,null,{
        params:{
          userId:this.userId,
          articleId:this.articleId
        }
      })
          .then(res=>{
            if(res.data.code == 200){
              this.$message.warning ('已取消点赞~');
              this.initStatus();
            }
          })
    },
    initStatus(){
      this.checkIfCollect();
      this.checkIfLike();
      this.getAuthorArticleCount();
      this.getArticle();
    },
    getArticleTags(){
      let url = 'article/getArticleTags';
      this.$axios.get(url,{
        params:{
          articleId:this.articleId
        }
      }).then(res=>{
        this.tags = res.data.data;
      })
    },
    initUserInfo(){
      if(sessionStorage.getItem('userInfo')){
        this.userId = JSON.parse(sessionStorage.getItem('userInfo')).id;
      }else{
        this.userId = -1;
      }
      this.addViewCountAndViewHistory();
    },
  },
  mounted () {
  },
  created() {
    this.articleId = this.$route.query.articleId;
    this.authorId = this.$route.query.authorId;
    console.log('作者id'+this.authorId)
    console.log('文章id'+this.articleId)
    this.getArticle();
    this.getComments();
    this.getArticleTags();
    this.getAuthor();
    this.initUserInfo();
    this.initStatus();
    this.queryFollowStatus();
    this.getAuthorHotArticles();
  },
}


</script>

<style scoped>
.article_title{
  text-align: center;
  padding: 10px 0;
  height: 40px;
  line-height: 40px;
  font-size: 30px;
  font-weight: bold;
  border-bottom: 1px solid lightgray;
}
.article_body {
  width: 88%;
  margin-left: 50px;
  margin-top:10px;
  /*background-color: rgba(18, 18, 18, 0.06);*/
}
.article_infos {
  text-align: right;
  padding-right: 50px;
  border-bottom: 1px solid lightgray;
}
.article_tags{
  margin-left: 50px;
  margin-top:40px;
  width: 88%;
}


.author_avatar{
  border: 1px solid lightgray;
  padding: 10px 10px;
  height: 280px;
  border-radius: 4px;

}
.avatar_nickname {
  height: 84px;
  line-height: 84px;
  border-bottom: 1px solid lightgray;

}
.avatar_nickname img{
  display: inline-block;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  float:left;
}
.avatar_nickname span {
  display: inline-block;
  width: 200px;
  float: left;
  font-size: 24px;
  font-weight: bolder;
  font-family: "微软雅黑 Light";
  letter-spacing: 4px;
  text-align: center;
}

.author_static_item {
  height: 100px;
  width: 100px;
  border:1px solid lightgray;
  float: left;
  margin-left: 32px;
  margin-top: 15px;
  text-align: center;
}
.article_options{
  margin-left: 80px;
  width: 88%;
}

.article_option:hover,
.article_option1:hover{
  cursor: pointer;
  color: #5bc65b;
}

.article_option{
  float: right;
  font-size: 20px;
  color: #f1da7f;
  margin-left: 40px;
}

.article_option1{
  float: right;
  font-size: 20px;
  color: red;
  margin-left: 40px;
}


.right_bar_item{
  height: 300px;
  border-radius: 4px;
  border: 1px solid lightgray;
  margin-bottom: 20px;
  margin-top: 30px;
  text-align: center;
}

.right_bar_item h3{
  text-align: left;
  margin-left: 20px;

}

.right_bar_item_title{
  width: 298px;
 margin-left: 10px;
  border-bottom: 1px solid lightgray;
}

.right_links {
  font-size: 18px;
}
.to_author:hover {
  color: #5bc65b;
  text-decoration: underline;
  cursor: pointer;
}




</style>